const { Component } = require("react");


class DemoA extends Component {
  constructor(props) {
    super(props)  // 必须位于第1行

    console.log("constructor...", props);

    // 在constructor中可以定义状态
    // props的数据流和state的数据流要独立
    // 和vue一个，props数据只能使用，不能修改
    this.state = {
      num: 1
    }
    this.add = this.add.bind(this);

    // 在constructor中不能调用setState
    // 组件没有挂载完毕时，是不能调用setState
    this.setState({
      num: 110
    })
  }
  add() {
    this.setState((state, props) => ({ num: state.num + 1 }))

    // props的数据流和state的数据流交叉，不推荐的。
    // this.setState((state,props) => ({ num: props.a + 1 }))
  }
  render() {
    console.log("render...");

    let { num } = this.state;
    return (
      <div>
        <h2>类组件</h2>
        <h3>{num}</h3>
        <button onClick={this.add}>+1</button>
      </div>
    )
  }

  componentDidUpdate() {
    console.log("componentDidUpdate...");
  }

  componentDidMount() {
    console.log("componentDidMount...");
  }
}

export default DemoA;

// constructor中能做什么？
//  1）定义状态
//  2）绑定方法的this
//  组件还没有挂载完毕，不会在这里调接口，不能进行DOM，不能开定器
// 一切和业务相关的代码，都不能写在constructor中